<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Cloud / Облако</title>


		<style>
			/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
			body {}

			#cloud {
				width: 350px;
				height: 120px;
				background: #f2f9fe;
				background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
				background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
				background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
				background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
				background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);

				border-radius: 100px;
				-webkit-border-radius: 100px;
				-moz-border-radius: 100px;

				position: relative;
				margin: 120px auto 20px;
			}

			#cloud:after,
			#cloud:before {
				content: '';
				position: absolute;
				background: #f2f9fe;
				z-index: -1
			}

			#cloud:after {
				width: 100px;
				height: 100px;
				top: -50px;
				left: 50px;

				border-radius: 100px;
				-webkit-border-radius: 100px;
				-moz-border-radius: 100px;
			}

			#cloud:before {
				width: 180px;
				height: 180px;
				top: -90px;
				right: 50px;

				border-radius: 200px;
				-webkit-border-radius: 200px;
				-moz-border-radius: 200px;
			}

			.shadow {
				width: 350px;
				position: absolute;
				bottom: -10px;
				background: #000;
				z-index: -1;

				box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
				-webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);

				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
			}
			.childwords{
			  position: relative;	
			  left: 100px;
			}
		</style>


	</head>

	<body>

		<div id="cloud">
			<div class="childwords">dd</div>
			<span class='shadow'></span>
		</div>



	</body>

</html>
